<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>设置主题</title>
    <base href="${ctxPath}">
    <link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/static/assets/css/tpl-theme.css"/>
</head>
<body>

<div class="layui-card-header">设置主题</div>
<div class="layui-card-body">
    <div class="theme-div">
        <div class="btnTheme">
            <img src="/static/assets/images/img_theme_1.png" title="黑白主题">
        </div>
        <div class="btnTheme" theme="black" title="黑色主题">
            <img src="/static/assets/images/img_theme_2.png">
        </div>
        <div class="btnTheme" theme="cyan" title="藏青主题">
            <img src="/static/assets/images/img_theme_7.png">
        </div>
        <div class="btnTheme" theme="blue-white" title="蓝白主题">
            <img src="/static/assets/images/img_theme_3.png">
        </div>
        <div class="btnTheme" theme="blue" title="蓝黑主题">
            <img src="/static/assets/images/img_theme_4.png">
        </div>
        <div class="btnTheme" theme="blue-side" title="蓝色主题">
            <img src="/static/assets/images/img_theme_5.png">
        </div>
        <div class="btnTheme" theme="white" title="白色主题">
            <img src="/static/assets/images/img_theme_6.png" style="border-color: #cccccc;">
        </div>
        <div class="btnTheme" theme="green-dark" title="暗绿主题">
            <img src="/static/assets/images/img_theme_9.png">
        </div>
        <div class="btnTheme" theme="green" title="绿色主题">
            <img src="/static/assets/images/img_theme_8.png">
        </div>
        <div class="btnTheme" theme="red-white" title="红白主题">
            <img src="/static/assets/images/img_theme_12.png">
        </div>
        <div class="btnTheme" theme="red-dark" title="暗红主题">
            <img src="/static/assets/images/img_theme_11.png">
        </div>
        <div class="btnTheme" theme="red" title="红色主题">
            <img src="/static/assets/images/img_theme_10.png">
        </div>
    </div>

    <div>
        <a class="more-menu-item" href="https://whvse.gitee.io/easyweb-html/doc/iframe/" target="_blank">
            <i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档
        </a>
        <a class="more-menu-item" href="https://demo.easyweb.vip/pro" target="_blank">
            <i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> &nbsp;单标签版本
        </a>
        <a class="more-menu-item" href="https://demo.easyweb.vip/theme"
           target="_blank">
            <i class="layui-icon layui-icon-theme"></i> 主题生成器
        </a>
    </div>
</div>

<script type="text/javascript" src="/static/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/static/assets/js/common.js"></script>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        // 选中缓存主题
        function setCurrentTheme() {
            $('.btnTheme').removeClass('active');
            var theme = layui.data('easyweb').theme;
            if (theme) {
                $('.btnTheme[theme=' + theme + ']').addClass('active');
            } else {
                $('.btnTheme').eq(0).addClass('active');
            }
        }

        setCurrentTheme();

        // 切换主题
        $('.btnTheme').click(function () {
            var theme = $(this).attr('theme');
            layui.data('easyweb', {
                key: 'theme',
                value: theme,
                remove: !theme
            });
            setCurrentTheme();
            try {
                alert(theme);
                top.layui.admin.changeTheme(theme ? '/static/assets/css/theme/' + theme + '.css' : theme);
            } catch (e) {
                console.log(e);
            }
        });
    });
</script>
</body>
</html>